import React, {PureComponent} from 'react';
import {
	ScrollView,
	StyleSheet, Text,
	View,
	Dimensions
} from 'react-native';

// 获取屏幕宽度
let { width: WIDTH } = Dimensions.get('window');

// 引入外部组件
let TopListView = require('./TopListView');

// 引入外部JSON数据
let TopMenu = require('./localData/TopMenu.json');

/**
 * @FileName: TopView
 * @Author: mazaiting
 * @Date: 2018/6/19
 * @Description:
 */
class TopView extends PureComponent {
	constructor(props){
		super(props);
		this.state={
			activePage: 0
		}
	}
	
	render() {
		return (
			<View style={styles.container}>
				{/*内容部分*/}
				<ScrollView
					// 设置水平
					horizontal={true}
					// 设置分页
					pagingEnabled={true}
					// 设置不显示水平指示器
					showsHorizontalScrollIndicator={false}
					// 一帧滚动完毕时
					onMomentumScrollEnd={(scrollView) => this.onScrollAnimationEnd(scrollView)}
				>
					{this.renderScrollItem()}
				</ScrollView>
				{/*页面指示*/}
				<View style={styles.indicatorViewStyle}>
					{this.renderIndicator()}
				</View>
			</View>
		)
	}
	
	/**
	 * 绘制滚动条目
	 */
	renderScrollItem() {
		// 组件数组
		let itemArr = [];
		// 颜色数组
		// let colorArr = ['red','green'];
		// 数据数组
		let dataArr = TopMenu.data;
		// 遍历创建组件
		// for (let i = 0; i < colorArr.length; i++) {
		for (let i = 0; i < dataArr.length; i++) {
			itemArr.push(
				/*<View
					key={i}
					style={{
						backgroundColor: colorArr[i],
						width: 480,
						height: 120
					}}
				>
					<Text>{i}</Text>
				</View>*/
				<TopListView key={i} dataArr={dataArr[i]}/>
			)
		}
		// 返回组件数组
		return itemArr
	}
	
	/**
	 * 渲染指示器
	 */
	renderIndicator() {
		// 指示器数组
		let indicatorArr = [], style;
		// 遍历创建组件
		for (let i = 0; i < 2; i++) {
			// 设置圆点样式
			style = i === this.state.activePage ? {color: 'orange'} : {color: 'gray'};
			indicatorArr.push(
				<Text key={i} style={[{fontSize: 30}, style]}>&bull;</Text>
			)
		}
		// 返回指示器数组
		return indicatorArr
	}
	
	/**
	 * 滚动结束
	 */
	onScrollAnimationEnd(scrollView) {
		// 求出当前页码
		let currentPage = Math.floor(scrollView.nativeEvent.contentOffset.x / WIDTH);
		// 更新状态机
		this.setState({
			activePage: currentPage
		})
	}
}

/**
 * 样式属性
 */
const styles = StyleSheet.create({
	container: {
		backgroundColor: 'white'
	},
	indicatorViewStyle: {
		flex: 1,
		flexDirection: 'row',
		justifyContent: 'center'
	}
});

/**
 * 导出当前Module
 */
module.exports = TopView;